<template>
  <div>
    <div>
      <div class="w-1400px m-auto">
        <div class="mt-16px el-descriptions__header">
          <div class="el-descriptions__title">插值</div>
          <el-button type="primary" @click="calculation" size="default" :loading="targets.loading">
            插值计算
          </el-button>
        </div>
        <el-table :data="targets.table" border>
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="name" label="指标" align="center" />
          <el-table-column prop="methods" label="插值方法" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.methods" size="default">
                <el-option value="natural" label="反距离权重" />
                <el-option value="IDW" label="自然临点法" />
                <el-option value="Kri" label="克里金" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="title">
      <span>插值结果</span>
    </div>
    <!-- <el-row :gutter="16">
      <template v-for="item in targets.table" :key="item.name">
        <el-col :span="6">
          <div class="h-200px border-solid border-1 border-gray-300">
            <MyMap> -->
    <!-- <GeoTiff :data="formRecord.imagLayer" /> -->
    <!-- <GeoTiff :data="item.resultData" />
              <geo :data="formRecord.rangeLayer" :layer-style="featureStyle" />
              <geo :data="formRecord.linesLayer" :layer-style="lineStyle" />
              <MapMarker :data="formRecord.poniosLayer" :layer-style="pointsFun" />
            </MyMap>
          </div>
          <div class="text-center pt-8px pb-16px">{{ item.name }}</div>
        </el-col>
      </template>
    </el-row> -->

    <el-table :data="target" border>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="target" label="指标" align="center" />
      <el-table-column prop="area1" label="超基线不超风险控制值" align="center" />
      <el-table-column prop="area2" label="低1-10倍面积(m²)" align="center" />
      <el-table-column prop="area3" label="中10-100倍面积(m²)" align="center" />
      <el-table-column prop="area4" label="高>100倍面积(m²)" align="center" />
      <el-table-column prop="area5" label="	超风控值面积占比" align="center" />
      <el-table-column prop="category" label="污染物类型" align="center" />
      <el-table-column prop="yjw" label="有机物无机物" align="center" />
      <el-table-column prop="isNapl" label="是否是NAPL" align="center" />
      <el-table-column label="操作" width="140" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="showMap(scope.row)">查看插值结果</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-16px el-descriptions__header">
      <div class="el-descriptions__title"> 损害面积和体积 </div>
    </div>
    <el-row :gutter="16">
      <el-col :span="12">
        <el-table :data="group" border>
          <el-table-column prop="category" label="" />
          <el-table-column prop="area2" label="低1-10倍(m²)" align="center" />
          <el-table-column prop="area3" label="中10-100倍(m²)" align="center" />
          <el-table-column prop="area4" label="高>100倍(m²)" align="center" />
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table :data="category" border>
          <el-table-column prop="category" label="" />
          <el-table-column prop="sum" label="面积(m²)" align="center" />
          <el-table-column prop="per" label="占比" align="center" />
        </el-table>
      </el-col>
    </el-row>

    <div class="text-center mt-16px">
      <el-button @click="cancel">上一步</el-button>
      <el-button type="primary" :disabled="!showResult" @click="next">下一步</el-button>
    </div>
    <el-dialog v-model="isShow" title="插值结果" width="1400" top="50px">
      <div class="h-80vh">
        <MyMap>
          <!-- <GeoTiff :data="formRecord.imagLayer" /> -->
          <GeoTiff :data="mapOptions" />
          <geo :data="formRecord.rangeLayer" :layer-style="featureStyle" />
          <geo :data="formRecord.linesLayer" :layer-style="lineStyle" />
          <MapMarker :data="formRecord.poniosLayer" :layer-style="pointsFun" />
        </MyMap>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import MyMap from '../map/map.vue'
import geo from '../map/geo'
import GeoTiff from '../map/geoTiff'
import MapMarker from '../map/marker'
import type { FormType } from '../types'
import { interpolationApi } from '@/api/appraisal/index'
import { lineStyle, pointsFun, featureStyle } from './style'
import { getListApi } from '@/api/home'

defineOptions({ name: 'Step3Form' })

const message = useMessage() // 消息弹窗

const { formRecord } = defineProps<{
  formRecord: FormType
}>()

const emits = defineEmits<{
  (e: 'next', data: any): void
  (e: 'cancel'): void
}>()

const targets = reactive({
  table: [] as any,
  loading: false
})

const initData = () => {
  targets.table = formRecord.baseInfo.pollutantType.map((item: string) => {
    return {
      name: item,
      methods: 'IDW'
    }
  })
}
initData()

const showResult = ref(false)

const next = () => {
  emits('next', {
    interpolation: {
      targetResps: target.value,
      groupResps: group.value,
      categorySums: category.value
    }
  })
}

const cancel = () => {
  emits('cancel')
}

const target = ref([])
const group = ref([])
const category = ref([])

/**
 * 插值计算
 */
const calculation = async () => {
  let isValid = true

  targets.table.forEach((item) => {
    if (!item.methods) {
      isValid = false
    }
  })

  if (!isValid) {
    message.error('请选择插值方法')
    return
  }

  // 点位
  const featureVOS = formRecord.baseInfo.surveyPoints.map((item: any) => {
    return {
      point: {
        x: item.X,
        y: item.Y,
        z: 0
      },
      attributes: {
        ...item
      }
    }
  })
  // 方法、指标、基线
  const targetsVos = targets.table.map((item) => {
    const limit = formRecord.limit.find((item) => (item.name = item.name))
    return {
      target: item.name,
      how: item.methods,
      line: limit.normalDistr ? limit.line90 : limit.quantile,
      riskManage: limit.risk
    }
  })
  // 范围
  const extent = formRecord.rangeLayer.bbox
  const [xmin, ymin, xmax, ymax] = extent

  targets.loading = true
  try {
    const { targetResps, groupResps, categorySums } = await interpolationApi({
      featureVOS: featureVOS,
      targets: targetsVos,
      xmin,
      ymin,
      xmax,
      ymax
    })
    target.value = targetResps
    group.value = groupResps
    category.value = categorySums

    const { list } = await getListApi({
      pageNo: 1,
      pageSize: 99
    })

    targets.table = targets.table.map((item) => {
      const find = target.value.find((target: any) => target.target === item.name) as any
      const tag = list.find((x: any) => x.target === item.target)
      return {
        ...item,
        classify: tag?.classify,
        isNapl: tag?.isNapl,
        resultData: {
          sources: [
            {
              url: find?.resultData
            }
          ]
        }
      }
    })

    showResult.value = true
  } finally {
    targets.loading = false
  }
  // 处理结果
}

const mapOptions = ref()
const isShow = ref(false)
const showMap = (data) => {
  mapOptions.value = {
    sources: [{ url: data.resultData }]
  }
  isShow.value = true
}
</script>

<style lang="scss" scoped>
// 标题样式
.title {
  position: relative;
  padding-left: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: var(--el-font-color-primary);

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #50bfff;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    content: '';
  }
}
</style>
